<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Web 全屏模式 将手机顶部的状态栏隐藏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 手机状态栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 忽略页面中的数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no"/>
    <!-- 添加视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>豆瓣</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 头部 -->
<header class="header">
    <div class="left">
        <a href="#"><img src="images/logo.png" alt=""></a>
    </div>
    <div class="center">
        <p >豆瓣App</p >
        <p>记录你的书影音生活</p>
    </div>
    <div class="right">
        <a href="#">打开App</a>
    </div>
</header>

<!-- 主体 -->
<div class="main scope">
    <!-- 虚构 分类 -->
    <div class="book-fiction">
        <div class="book-title">
            <h2>最受关注图书 | 虚构类</h2>
            <a href="fictions.html">更多</a>
        </div>
        <div class="book-list">
            <ul>
                <li>
                    <a href="details.html">
                        <div class="book-img"><img src="images/book/book1.jpg" alt=""></div>
                        <p class="ellipsis">佛兰德镜子</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.3</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book2.jpg" alt=""></div>
                        <p class="ellipsis">82年生的金智英</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.0</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book3.jpg" alt=""></div>
                        <p class="ellipsis">消失的塞布丽娜</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.4</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book4.jpg" alt=""></div>
                        <p class="ellipsis">闯入者</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.5</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book5.jpg" alt=""></div>
                        <p class="ellipsis">猎人</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">7.5</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book6.jpg" alt=""></div>
                        <p class="ellipsis">OPUS 作品</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">9.1</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book7.jpg" alt=""></div>
                        <p class="ellipsis">王考</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.8</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book8.jpg" alt=""></div>
                        <p class="ellipsis">聊天记录</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">7.1</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 非虚构 -->
    <div class="book-fiction">
        <div class="book-title">
            <h2>最受关注图书 | 非虚构类</h2>
            <a href="#">更多</a>
        </div>
        <div class="book-list">
            <ul>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book1.jpg" alt=""></div>
                        <p class="ellipsis">焦虑型人格</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">7.1</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book2.jpg" alt=""></div>
                        <p class="ellipsis">在别人的句子里</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.6</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book3.jpg" alt=""></div>
                        <p class="ellipsis">加西亚·马尔克斯访谈录</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">9.1</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book4.jpg" alt=""></div>
                        <p class="ellipsis">因为我有生活</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.8</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book5.jpg" alt=""></div>
                        <p class="ellipsis">书店日记</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">9.0</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book6.jpg" alt=""></div>
                        <p class="ellipsis">汴京之围</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.4</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book7.jpg" alt=""></div>
                        <p class="ellipsis">赵桥村</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.4</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="book-img"><img src="images/book/book8.jpg" alt=""></div>
                        <p class="ellipsis">原生家庭生存指南</p>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">8.0</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 豆瓣书店 -->
    <div class="book-market">
        <div class="market-header">
            <div class="market-title">
                <h2>豆瓣书店</h2>
                <a href="#">更多</a>
            </div>
            <a class="ad" href="#">
                <img src="images/title/ad.jpg" alt="">
                <div class="content">
                    <div class="title"><h3>你好小朋友复刻版</h3><span>¥390</span></div>
                    <p>116张照片带你重返闪亮的童年</p>
                </div>
            </a>
        </div>
        <div class="market-list">
            <ul>
                <li v-for="(book,bindex) in markets" :key="bindex">
                    <a href="#">
                        <div class="market-img">
                            <img :src="book.src" alt="">
                        </div>
                        <p  class="ellipsis">{{book.name}}</p>
                        <span>¥ {{book.price}}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 发现好图书 -->
    <div class="book-find">
        <header class="book-header"><h2>发现好图书</h2></header>
        <div class="find-list">
            <div>
                <ul>
                    <li v-for="(content,cindex) in find" :key="cindex">
                        <a href="#" :style="{color: content.color, borderColor:content.color}">{{content.title}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 分类 -->
    <div class="book-cate">
        <header class="book-header"><h2>分类浏览</h2></header>
        <div class="cate-list">
            <ul>
                <li v-for="(cate, cindex) in cates" :key="cindex">
                    <a :href="cate.href">
                        {{cate.name}}
                        <span></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</div>

<!-- 尾部 -->
<footer class="footer">
    <div class="footer-header">
        <img src="images/logo.png" alt="">
        <strong>豆瓣</strong>
    </div>
    <a href="#">免费下载 iOS / Android 版客户端</a>
</footer>





<script src="js/index.js"></script>
</body>
</html>